<template>
  <div>
    <el-popover placement="bottom" :visible="visible">
      <template #reference>
        <el-input
          v-model="state.icon"
       @click.stop="handleShow"
          @clear="handleClear"
          @blur="handleHide"
          placeholder="点击选择图标"
        >
          <template #prefix>
            <el-icon v-if="state.icon&&state.icon!='#'" class="llt-icon-size">
              <component  :is="state.icon"></component>
            </el-icon>
            <el-icon v-else class="llt-icon-size">
              <Search />
            </el-icon>
          </template>
        </el-input>
      </template>
      <el-scrollbar style="width: 600px" height="400px">
              
        <div
        class="fd flexWrap"
        >
          <el-icon   v-for="item in icons"
          :key="item"
          @click="handleIcon(item)"
          class="llt-icon-size"> <component :is="item"></component></el-icon>
         
        </div>

      </el-scrollbar>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import IconComponent from "/@/layouts/components/Sidebar/Item.vue";
import {
  shallowRef,
  reactive,
  defineEmits,
  onBeforeMount,
  onMounted,
  watch,
  computed,
  ref,
} from "vue";
import { useIndexStore } from "/@ts/store";
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const store = useIndexStore();
store.setIcons(Object.keys(ElementPlusIconsVue))
const icons = ref( store.getIcons)
const state: any = reactive({
  icons: [],
  icon: "",
});
let visible = shallowRef(false);
const handleShow = () => {
  visible.value = true;
};
const handleHide = () => {
  visible.value = false;
};
const emit = defineEmits(["update:modelValue"]);
const prop = defineProps({
  modelValue: {
    type: String,
    required: true,
  },
});
watch(
  () => prop.modelValue,
  (val: any) => {
    state.icon = val;
  },
  {
    deep: true,
    immediate: true,
  },
);
const handleClear = () => {
  emit("update:modelValue", "");
  handleHide()
}
const handleIcon = (name: string) => {
  handleHide()
  emit("update:modelValue", name);
};
</script>

<style scoped lang="scss"></style>
